<template>
  <div style="display: inline-block">
    <el-button type="primary" @click="showDialog">{{btnText}}</el-button>

    <el-dialog
      :visible.sync="dialog"
      width="600px"
      title="修改货柜信息"
      append-to-body
    >
      <el-form
        ref="form"
        :model="currentForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item
          label="货柜名称"
          prop="containerName"
        >
          <el-input v-model="currentForm.containerName"></el-input>
        </el-form-item>
        <el-form-item
          v-for="item in showFormItem"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
          <template v-if="item.type === 'date'">
            <el-date-picker
              v-model="currentForm[item.prop]"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </template>
          <template v-else>
            <el-input v-model="currentForm[item.prop]" :placeholder="item.placeholder ? item.placeholder : '请填写'"></el-input>
          </template>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm()" :loading="loading">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {formItem} from "@/views/container/configs/formItem";
import request from "@/utils/request";
import containerStorageMixin from "@/views/container/mixins/containerStorageMixin";

export default {
  name: "EditContainerBtn",
  mixins: [containerStorageMixin],
  props: {
    btnText: {
      type: String,
      default: '修改',
    },
    row: {
      required: true,
      type: Object,
    },
  },
  computed: {
    showFormItem(){
      return this.formItem.filter(item => item.transferType.includes(this.row.transferType))
    }
  },
  data(){
    return {
      dialog: false,
      loading: false,
      currentForm: {
        id: 0,
        containerName: '',
        transferType: '',
        containerNo: '',
        GPS: '',
        flightNo: '',
        ladingNo: '',
        boxIds: [],
        bookingNum: '', // 订舱号
        sealNum: '', // 封条号
        shipsName: '', // 船名
        flightNum: '', // 航次
        startPort: '', // 起始港
        targetPort: '', // 目的港
        boxWeight: '', // 箱型重量
        installDate: '', // 装柜日期
        customBroker: '', // 报关行
        customClearance: '', // 清关行
      },
      rules: {
        containerName: [
          { required: true, message: '请输入货柜名称', trigger: 'blur' }
        ],
        containerNo: [
          { required: true, message: '请输入货柜编号', trigger: 'blur' },
        ],
        GPS: [
          // { required: true, message: '请输入GPS编号', trigger: 'blur' },
        ],
        flightNo: [
          { required: true, message: '请输入航班号', trigger: 'blur' },
        ],
        ladingNo: [
          // { required: true, message: '请输入提单号', trigger: 'blur' },
        ],
      },
      formItem,
    }
  },
  methods: {
    showDialog(){
      this.dialog = true
      const rememberObj = this.getLocalStorage()
      for (let currentFormKey in this.currentForm) {
        this.currentForm[currentFormKey] = this.row[currentFormKey] || ''
      }
      this.currentForm.id = this.row.id
    },
    submitForm(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.loading = true
          request({
            url: '/container/editContainer',
            method: 'put',
            data: this.currentForm,
            handleError: true,
          })
            .then(res=>{
              this.loading = false
              this.$sMsg(res.message)
              this.dialog = false
              this.$emit('changeRow')
              this.setLocalStorage(this.currentForm)
            })
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">

</style>
